<template>
    <div class="insrecord">
        <el-tabs v-model="activeName">
            <el-tab-pane name="first">
                <span slot="label" class="fontClass" style="margin:0 20px;font-size: 20px;">社保</span>
                <div style="margin-bottom: 15px;display: flex;">
                    <el-button type="primary" style="margin-right: 15px;" @click="dialogVisible = true">新增</el-button>
                </div>
                <div class="card-content">
                    <el-card shadow="always" v-for="item in shebaolist" :key="item.id">
                        <div class="card-body">
                            <div style="font-size: 20px;font-weight: 600;width:30%">{{ item.name }}</div>
                            <el-switch style="width:20%" :value="item.checked === 1" @change="changeStatus(item)">
                            </el-switch>
                            <div style="width:20%">
                                <el-button type="text" size="default" @click="edit(item)">编辑</el-button>
                                <el-button type="text" size="default" style="color:red"
                                    v-if="item.checked === 0">删除</el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>

            <el-tab-pane name="second">
                <span slot="label" class="fontClass" style="margin:0 20px;font-size: 20px;">公积金</span>
                <div style="margin-bottom: 15px;display: flex;">
                    <el-button type="primary" style="margin-right: 15px;" @click="dialogVisible1 = true">新增</el-button>
                </div>
                <div class="card-content">
                    <el-card shadow="always" v-for="item in gongjijinlist" :key="item.id">
                        <div class="card-body">
                            <div style="font-size: 20px;font-weight: 600;width:30%">{{ item.name }}</div>
                            <el-switch style="width:20%" :value="item.checked === 1" @change="changeStatus(item)">
                            </el-switch>
                            <div style="width:20%">
                                <el-button type="text" size="default" @click="edit1(item)">编辑</el-button>
                                <el-button type="text" size="default" style="color:red"
                                    v-if="item.checked === 0">删除</el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 社保新增 -->
        <el-dialog title="新增" :visible.sync="dialogVisible" width="30%">
            <el-form :model="shebaoForm" ref="shebaoFormref" :rules="shebaoFormrules" label-width="100px">
                <el-form-item label="项目名称" prop="name" style="font-size: 20px;">
                    <el-input v-model="shebaoForm.name"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="shebaoForm.checked">
                    </el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 公积金新增 -->
        <el-dialog title="新增" :visible.sync="dialogVisible1" width="30%">
            <el-form :model="gongjijinForm" ref="gongjijinFormref" :rules="gongjijinFormrules" label-width="100px">
                <el-form-item label="项目名称" prop="name" style="font-size: 20px;">
                    <el-input v-model="gongjijinForm.name"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="gongjijinForm.checked">
                    </el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 社保修改 -->
        <el-dialog title="编辑" :visible.sync="dialogVisible2" width="30%">
            <el-form :model="editshebaoForm" ref="editshebaoFormref" :rules="editshebaoFormrules" label-width="100px">
                <el-form-item label="项目名称" prop="name" style="font-size: 20px;">
                    <el-input v-model="editshebaoForm.name"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch :value="editshebaoForm.checked == 1">
                    </el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 公积金修改 -->
        <el-dialog title="编辑" :visible.sync="dialogVisible3" width="30%">
            <el-form :model="editgongjijinForm" ref="editgongjijinFormmref" :rules="editgongjijinFormrules" label-width="100px">
                <el-form-item label="项目名称" prop="name" style="font-size: 20px;">
                    <el-input v-model="editgongjijinForm.name"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch :value="editgongjijinForm.checked == 1">
                    </el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

export default {
    data() {
        return {
            dialogVisible: false,
            dialogVisible1: false,
            dialogVisible2: false,
            dialogVisible3: false,
            activeName: 'first',
            shebaolist: [
                { id: 1, name: '养老保险', checked: 1, },
                { id: 2, name: '医疗保险', checked: 1, },
                { id: 3, name: '工伤保险', checked: 1, },
                { id: 4, name: '失业保险', checked: 1, },
                { id: 5, name: '生育保险', checked: 1, },
                { id: 6, name: '其他', checked: 1, },
                { id: 7, name: '其他', checked: 0, },
            ],
            shebaoForm: {
                name: '',
                checked: 1
            },
            shebaoFormrules: {
                name: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                ]
            },
            editshebaoForm: {
                name: '',
                checked: 1
            },
            editshebaoFormrules: {
                name: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                ]
            },
            gongjijinlist: [
                { id: 1, name: '公积金', checked: 1, },
                { id: 2, name: '补充公积金', checked: 1, },
                { id: 3, name: '其他', checked: 1, },
                { id: 4, name: '其他', checked: 0, },
            ],
            gongjijinForm: {
                name: '',
                checked: 1
            },
            gongjijinFormrules: {
                name: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                ]
            },
            editgongjijinForm: {
                name: '',
                checked: 1
            },
            editgongjijinFormrules: {
                name: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                ]
            },
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    methods: {
        changeStatus(value) {
            let idx = this.shebaolist.findIndex(item => item.id === value.id)
            console.log(idx);
            let status = this.shebaolist[idx].checked
            if (status === 1) {
                this.shebaolist[idx].checked = 0;
            } else {
                this.shebaolist[idx].checked = 1;
            }
        },
        edit(value){
            this.dialogVisible2 = true;
            this.editshebaoForm = value;
        },
        edit1(value){
            this.dialogVisible3 = true;
            this.editgongjijinForm = value;
        },
    }
};
</script>
<style lang='less'>
.insrecord {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: #f5f7f9;

    .el-tabs {
        background: #fff;
        padding: 20px;

        .card-content {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .el-card {
                width: 48%;
                margin-bottom: 15px;

                .card-body {
                    height: 150px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    box-sizing: border-box;
                }
            }
        }
    }
}
</style>